<template>
  <div>
  <el-row>
    <el-col :span="8">
      <img src="../../../assets/images/logo.png">
    </el-col>
    <el-col :span="12">
      <el-form :inline="true" >
        <el-form-item >
          <el-input style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="4">
      <el-badge :value="num" class="item">
        <el-button size="small" @click="toBuyCar">我的购物车</el-button>
      </el-badge>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">&nbsp;</el-col>
    <el-col :span="12">
      <el-link  type="primary" style="font-size: 20px">推荐</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toProduct(1)">男装</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toProduct(2)">女装</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toProduct(3)">鞋包</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px" @click="toProduct(4)">内衣</el-link>
      <el-link  type="primary" style="margin-left: 30px;font-size: 20px"@click="toProduct(5)" >运动</el-link>
    </el-col>
    <el-col :span="4">&nbsp;</el-col>
  </el-row>
  </div>
</template>

<script>
    export default {
        name: "Search",
        props:{
           num:{
             default:0,
             type:Number
           }

        },
        methods:{
          toBuyCar(){
            this.$router.push("/buyCar");
          },
          toProduct(proType){
            localStorage.setItem("proType",proType);
            window.location.href="/productClass";
          },

          queryCar(){//查询我的购物车
            //获取用户id
            const userId=1;
            const self = this;
            //发送ajax请求
            const http = this.$http.get("/car/queryCar",{params:{"userId":userId}});
            //成功回调
            http.then(function (rs) {

              if(rs.data.code==200){
                self.num = rs.data.data.length;

              }else{
                //self.$message(rs.data.msg);
              }
            });
            http.catch(function () {
              self.$alert("服务器异常，请检查地址或者服务器是否启动");
            })

          }
        },
       created() {
          this.queryCar();
       }

    }
</script>

<style scoped>

</style>
